<template>
  <div>
    <van-nav-bar
      title="登陆"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      class="loginNavBar"
    />
    <van-form
      validate-first
      prevent
      @submit="onSubmit"
      ref="loginForm"
      class="loginForm"
    >
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        v-model="user.mobile"
        name="mobile"
        clearable
        center
        left-icon="iconfont icon-shouji"
        icon-prefix="iconfont"
        placeholder="请输入手机号"
        :rules="[{ validator, message: '请输入正确手机号码' }]"
      />
      <!-- 通过 validator 进行函数校验 -->
      <van-field
        v-model="user.code"
        name="code"
        clearable
        center
        left-icon="iconfont icon-yanzhengma"
        icon-prefix="iconfont"
        placeholder="请输入验证码"
        :rules="[{ pattern, message: '请输入正确验证码' }]"
      >
        <template #button>
          <van-button
            size="small"
            @click.prevent="send"
            type="default"
            v-if="disable"
            round
            >发送验证码</van-button
          >
          <van-button
            size="small"
            @click.prevent="send"
            disabled
            type="default"
            v-else
            round
            >请({{ num }}s)后再次发送</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button block type="info">登陆</van-button>
      </div>
    </van-form>
  </div>
</template>
<script src='./index.js'>
</script>

<style scoped>
.loginNavBar {
  background-color: #1989fa;
}
::v-deep .loginNavBar .van-nav-bar__text,
::v-deep .loginNavBar .van-icon-arrow-left,
.loginNavBar >>> .van-nav-bar__title {
  color: #fff;
}
.loginForm >>> .iconfont-iconfont {
  font-size: 33px;
}
</style>
